<template>
	<div class="session-summary-container">
		<div class="item" v-for="item in data" :key="item.id">
			<div class="item-label"
				>{{ item.name }}
				<span v-if="item.isRequired === 'Y'" style="color: red">*</span>
			</div>
			<!-- 单行文本 -->
			<el-input type="textarea" placeholder="" v-model="item.value" autosize :disabled="true" v-if="item.type === 'input'"> </el-input>
			<!-- 多行文本 -->
			<el-input type="textarea" placeholder="" v-model="item.value" autosize show-word-limit disabled v-if="item.type === 'textarea'"> </el-input>
			<!-- 单选 -->
			<el-radio-group v-model="item.value" disabled v-if="item.type === 'radio'">
				<!-- <div v-for="radioItem in item.data.options" :key="radioItem"> -->
				<el-radio :label="radioItem" v-for="radioItem in item.data.options" :key="radioItem">{{ radioItem }}</el-radio>
				<!-- </div> -->
			</el-radio-group>
			<!-- 下拉单选 -->
			<el-select v-model="item.value" placeholder="" disabled v-if="item.type === 'select'">
				<el-option v-for="selectItem in item.data.options" :key="selectItem" :label="selectItem" :value="selectItem"> </el-option>
			</el-select>
			<!-- 多选 -->
			<el-checkbox-group v-model="item.value" disabled v-if="item.type === 'checkbox'">
				<!-- <div v-for="checkBoxItem in item.data.options" :key="checkBoxItem"> -->
				<el-checkbox :label="checkBoxItem" v-for="checkBoxItem in item.data.options" :key="checkBoxItem" :value="checkBoxItem">{{ checkBoxItem }}</el-checkbox>
				<!-- </div> -->
			</el-checkbox-group>
		</div>
		<el-empty description="暂无数据" v-if="data.length === 0"></el-empty>
	</div>
</template>

<script>
import { getBizSessionSummary } from '@/api/api';
export default {
	name: 'SessionSummary',

	props: {
		sessionId: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			data: []
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		getData() {
			this.$Spin.show();
			getBizSessionSummary(this.sessionId)
				.then(res => {
					const { data } = res.data;
					this.data = data;
					console.log('getBizSessionSummary success', res, data, this.data);
					this.$Spin.hide();
				})
				.catch(err => {
					console.log('getBizSessionSummary err', err);
					this.$requestApiError(err, () => {
						this.$router.push('/');
					});
					this.$Spin.hide();
				});
		}
	}
};
</script>

<style scoped>
.session-summary-container {
	padding: 20px;
	width: 100%;
	height: 100%;
}
.item {
	/* background: #f7f8f9; */
	margin: 30px;
	/* min-height: 60px; */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-self: center;
}
.item-label {
	color: #8e8e93;
	padding: 0 0 10px 0px;
	text-align: left;
	font-size: 14px;
}
</style>
